#{extends 'popup.html' /}
#{set title:'Payroll Info' /}

<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/PayrollRegister/findPayroll.css'}">

<div class="detailHeader">
<span class="name">${employee.name}</span>
<span class="rate">Rate: ${employee.rate.description}</span>
</div>

<br />

#{form @PayrollRegister.savePayroll(), id:'payrollInfoForm'}
<input type="hidden" id="employeeId" name="employeeId" value="${employee.id}" />
<input type="hidden" id="payrollPeriodId" name="payrollPeriodId" value="${payrollPeriod.id}" />
<input type="hidden" id="payrollId" name="payrollId" value="${payroll.id}" />
<table class="tableForm">
  <tr>
    <td>
    	<table>
    	    <thead>
               <tr>
                   <th colspan="2" align="left">Payments (hrs)</th>
               </tr>
            </thead>
			#{list items=paymentTypes, as:'paymentType'}
		    <tr>
		        <td>${paymentType.label}:</td>
		        <td><input name="${paymentType.name}" type="text" value="${payrollPayments.get(paymentType.name)}" /></td>
		    </tr>
		    #{/list}
		</table>
    </td>
    <td>
    	<table>
    	    <thead>
               <tr>
                   <th colspan="2" align="left">Deductions (value)</th>
               </tr>
            </thead>
			#{list items=deductionTypes, as:'deductionType'}
		    <tr>
		        <td>${deductionType.label}:</td>
		        <td><input name="${deductionType.name}" type="text" value="${payrollDeductions.get(deductionType.name)}" /></td>
		    </tr>
		    #{/list}
		</table>
	</td>
  </tr>
</table>

#{/form}
